<template>
  <div class="video-box" ref="videoBox">
    <nut-video
      :source="{
        src: urls + props.url,
        type: 'video/mp4',
      }"
      :options="options"
      @play="onPlay"
    >
    </nut-video>
    <!-- <video    
      :style="{ background }" 
      controls 
      width="100%"
      v-if="flag"
      :title="props.name"
      :src="urls + props.url"
      :muted="true" 
      :autoplay="false" 
      preload
      x5-playsinline="true"
      x5-video-orientation="landscape"
      webkit-playsinline
      :poster="urls + props.url + '?ci-process=snapshot&time=1&format=jpg'"
    /> -->
    <!-- @play="onPlay"
      @pause="onPause" 
      @timeupdate="onTimeupdate"
      @canplay="onCanplay" -->
    <!-- :src="urls + props.url" src="http://t-file.api.jiyi.show/api/file/463242162090053" -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { accountReplace } from '@/api/user/user';
import { urls } from '@/utils/request/upload';
import { reactive, nextTick, ref, onMounted } from 'vue';
const flag = ref(false);
const videoBox = ref(null);
const props = defineProps({
  url: {
    type: String,
  },
  name: {
    type: String,
  },
  iconColor: {
    type: String,
    default: '#262933',
  },
  background: {
    type: String,
    default: '#000',
  },
  description: {
    type: String,
  },
  //   audio: {
  //     type: Object,
  //   },
});
const options = {
  autoplay: false,
  muted: true,
  controls: true,
  loop: false,
  playsinline: true,
  poster: urls + props.url + '?ci-process=snapshot&time=2&format=jpg',
};

// const options = reactive({
//   src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
//   poster: '', //封面
// })
// nextTick(() => {
//   alert(urls + props.url);
// });

const onPlay = (ev) => {
  //   console.log('播放')
};
const onPause = (ev) => {
  //   console.log(ev, '暂停')
};

const onTimeupdate = (ev) => {
  //   console.log(ev, '时间更新')
};
const onCanplay = (ev) => {
  //   console.log(ev, '可以播放')
};
const animation = () => {
  let canTrigger = true; // 标记是否可以触发

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        nextTick(() => {
          flag.value = true;
        });
        // console.log(flag.value, 'flag.value');
      } else {
        // flag.value = false;
      }
    });
  });
  observer.observe(videoBox.value);
};
onMounted(() => {
  animation();
});
</script>

<style scoped lang="less">
.video-box {
  width: 100%;
  margin-bottom: 26px;
  :deep(video) {
    width: 100%;
    min-height: 160px;
    max-height: 320px;
    opacity: 0.99;
    object-fit: contain;
  }
}
</style>
